<template>
  <el-dialog
    title="关于"
    :visible.sync="dialogVisible"
    width="60%"
  >
  <div class="aboutItem">
    <div>作者：</div>
    <div>凤舞九天</div>
  </div>
  <div class="aboutItem">
    <div>项目地址：</div>
    <div class="Link" @click="openLink0">gitee链接</div>
  </div>
  <div class="aboutItem">
    <div>开源协议：</div>
    <div>MulanPSL2</div>
  </div>
  <div class="programDescription">
    <div class="descriptionHeader">项目描述：</div>
    <div class="descriptionBody">理想状态下的双摆运动仿真，只需设置好初始状态，便可计算出其后的运动轨迹。其源代码和背后的原理请查看gitee项目链接。</div>
  </div>
  <div class="thanks">
    <div>致谢：</div>
    <div class="thanksItem">
      <div class="Link" @click="openLink1" >Vue.js</div>
      <div class="Link" @click="openLink2" >electron</div>
      <div class="Link" @click="openLink3" >Element</div>
      <div class="Link" @click="openLink4" >Echarts</div>
      <div class="Link" @click="openLink5" >vue-cli-plugin-electron-builder</div>
    </div>
  </div>
  </el-dialog>
</template>

<script>

const { shell } = window.require('electron')

export default {
  name: 'about-dialog',
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    openLink0() {
      shell.openExternal('https://gitee.com/cgper/double-pendulum-motion-simulation-desktop');
    },
    openLink1() {
      shell.openExternal('https://cn.vuejs.org/');
    },
    openLink2() {
      shell.openExternal('https://www.electronjs.org/');
    },
    openLink3() {
      shell.openExternal('https://element.eleme.cn/#/zh-CN');
    },
    openLink4() {
      shell.openExternal('https://echarts.apache.org/zh/index.html');
    },
    openLink5() {
      shell.openExternal('https://github.com/nklayman/vue-cli-plugin-electron-builder');
    }
  }
}
</script>

<style>
.aboutItem {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
}

#programLink {
  font-size: 16px;
}

.programDescription {
  border: 1px solid #c5b5f0;
  padding: 8px;
  border-radius: 10px;
  margin-top: 10px;
}

.descriptionHeader {
  font-size: 16px;
}

.descriptionBody {
  margin-top: 10px;
  font-size: 14px;
  text-indent: 2em;
}

.thanks {
  border: 1px solid #c5b5f0;
  padding: 8px;
  border-radius: 10px;
  margin-top: 10px;
  font-size: 16px;
}

.thanksItem {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.thanksItem > div {
  margin-top: 10px;
}

.Link {
  color: #409EFF;
}

.Link:hover {
  cursor: pointer;
}
</style>